<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
  <title>Index</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <link href="<%=basePath%>css/bootstrap.css" rel="stylesheet" media="screen">
  <link href="<%=basePath%>css/style.css" rel="stylesheet" media="screen">
  <link href="<%=basePath%>css/main.css" rel="stylesheet" media="screen">
  <link href="<%=basePath%>css/font-awesome.css" rel="stylesheet">
  <!-- 	<link href="<%=basePath%>css/koala_tree.css" rel="stylesheet" media="screen"> -->
  <!-- 	<link href="<%=basePath%>css/koala_wizard.css" rel="stylesheet" media="screen"> -->
  <!-- 	<link href="<%=basePath%>css/koala_datetimepicker.css" rel="stylesheet">  -->
  <!-- 	<link href="<%=basePath%>css/koala_richeditor.css" rel="stylesheet">   -->
  <!-- 	<link href="<%=basePath%>css/koala_colorpicker.css" rel="stylesheet">   -->
  <!-- 	<link href="<%=basePath%>css/koala.css" rel="stylesheet">   -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
  <meta charset="utf-8">
</head>
<body>


<nav class="navbar" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="logo"><i></i><span></span>KoalaUI组件演示平台</div>
    </div>
  </div>
</nav>

<div class="content">
  <div class="sidebar">
    <div class="sidebar-dropdown"><a class="" href="#">菜单</a></div>
    <ul id="nav">
      <li  class=""><a href="index1.html" class="open"><i class="icon-home"></i> 首页</a></li>
      <!-- Main menu with font awesome icon -->
      <li  class="has_sub"><a href="#"><i class="icon-edit"></i>基础组件<span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <!-- Sub menu markup -->
        <ul>
          <li><a href="javascript:void(0)" tag="accordion_basic" load-html="<%=basePath%>pages/accordion/basic.html">手风琴</a></li>
          <li><a href="javascript:void(0)" tag="colorpicker_basic" load-html="<%=basePath%>pages/colorpicker/test.html">颜色选择框</a></li>
          <li><a href="javascript:void(0)" tag="button_basic" load-html="<%=basePath%>pages/button/test.html">按钮</a></li>
          <!-- 					<li><a href="javascript:void(0)" tag="toolbar_basic" load-html="pages/toolbar/test.html">工具栏</a></li> -->
          <li><a href="javascript:void(0)" tag="carousel_basic" load-html="<%=basePath%>pages/carousel/test.html">轮播组件</a></li>
          <!-- 					<li><a href="javascript:void(0)" tag="checkbox_basic" load-html="pages/checkbox/basic.html">复选框</a></li> -->
          <li><a href="javascript:void(0)" tag="select_basic" load-html="<%=basePath%>pages/select/test.html">选择框</a></li>
          <li><a href="javascript:void(0)" tag="dropdown_basic" load-html="<%=basePath%>pages/dropdown/basic.html">下拉菜单</a></li>
          <!-- 					<li><a href="javascript:void(0)" load-html="label.html">标签</a></li> -->
          <li><a href="javascript:void(0)" tag="popover_basic" load-html="<%=basePath%>pages/popover/popover.html">弹出提示</a></li>
          <!-- 					<li><a href="javascript:void(0)" tag="progressbar_basic" load-html="pages/progressbar/test.html">进度条</a></li> -->
          <!-- 					<li><a href="javascript:void(0)" tag="radio_basic" load-html="pages/radio/basic.html">单选框</a></li> -->
          <!-- 					<li><a href="javascript:void(0)" load-html="text.html">文本框</a></li> -->
          <li><a href="javascript:void(0)" tag="tooltip_basic" load-html="<%=basePath%>pages/tooltip/tooltip.html">工具提示条</a></li>
          <li><a href="javascript:void(0)" tag="spinner_basic" load-html="<%=basePath%>pages/spinner/test.html">微调器</a></li>
          <!-- Form表单 -->
        </ul>
      </li>
      <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>组合框 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="combobox_basic" load-html="<%=basePath%>pages/combobox/basic.html">基本组合框</a></li>
          <!--                   <li><a href="javascript:void(0)" load-html="#">多选支持</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">异步加载</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">下拉表格</a></li> -->
        </ul>

      </li>
      <li class="has_sub"><a href="#"> <i class="icon-list-alt"></i>树形组件 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="tree_basic" load-html="<%=basePath%>pages/tree/basic.html">基本树形</a></li>
          <li><a href="javascript:void(0)" tag="tree_chkbox" load-html="<%=basePath%>pages/tree/use_checkbox.html">带复选框</a></li>
          <li><a href="javascript:void(0)" tag="tree_ajax" load-html="<%=basePath%>pages/tree/use_ajax.html">异步加载</a></li>
          <li><a href="javascript:void(0)" tag="tree_draggable" load-html="<%=basePath%>pages/tree/use_draggable.html">可拖拽节点</a></li>
          <li><a href="javascript:void(0)" tag="tree_icon" load-html="<%=basePath%>pages/tree/use_icon.html">自定义图标</a></li>
          <!--                   <li><a href="javascript:void(0)" load-html="#">可编辑节点</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">节点事件</a></li> -->
          <!--                   <li><a href="javascript:void(0)" tag="tree_menu" load-html="pages/tree/use_menu.html">右键菜单</a></li> -->
        </ul>
      </li>
      <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>数据表格 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="datagrid_basic" load-html="<%=basePath%>pages/grid/basic.html">基本数据表格</a></li>
          <!--                   <li><a href="javascript:void(0)" load-html="#">可排序列</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">多行选择</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">带复选框</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">可编辑表格</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">可展开行</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">多表头</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">行分类</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">行拖放</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">表格右键菜单</a></li> -->
        </ul>
      </li>
      <li class="has_sub"><a href="#"><i class="icon-reorder"></i>页面布局 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="layout_default" load-html="<%=basePath%>pages/layout/default.html">默认布局</a></li>
          <li><a href="javascript:void(0)" tag="layout_we" load-html="<%=basePath%>pages/layout/west_expanded.html">左边上下扩展</a></li>
          <li><a href="javascript:void(0)" tag="layout_w2b" load-html="<%=basePath%>pages/layout/west_to_bottom.html">左边向下扩展</a></li>
          <li><a href="javascript:void(0)" tag="layout_w2t" load-html="<%=basePath%>pages/layout/west_to_top.html">左边向上扩展</a></li>
        </ul>
      </li>
      <li class="has_sub"><a href="#"><i class="icon-reorder"></i>向导组件<span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="wizard_basic" load-html="<%=basePath%>pages/wizard/default.html">注册向导范例</a></li>
          <!--                   <li><a href="javascript:void(0)" load-html="#">左右切换</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">上下切换</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">淡出淡入</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">随机动画</a></li> -->
        </ul>
      </li>
      <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>日期时间 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="dtp_date" load-html="<%=basePath%>pages/datetimepicker/date_only.html">只显示日期</a></li>
          <li><a href="javascript:void(0)" tag="dtp_time" load-html="<%=basePath%>pages/datetimepicker/time_only.html">只显示时间</a></li>
          <li><a href="javascript:void(0)" tag="dtp_datetime" load-html="<%=basePath%>pages/datetimepicker/date_time.html">显示全部</a></li>
          <li><a href="javascript:void(0)" tag="dtp_setvalue" load-html="<%=basePath%>pages/datetimepicker/set_value.html">设置固定值</a></li>
        </ul>
      </li>
      <!-- 	      	<li class="has_sub"><a href="#"><i class="icon-list-alt"></i>文件上传 <span class="pull-right"><i class="icon-chevron-right"></i></span></a> -->
      <!--                 <ul> -->
      <!--                   <li><a href="javascript:void(0)" load-html="#">默认功能</a></li> -->
      <!--                   <li><a href="javascript:void(0)" load-html="#">限制文件大小</a></li> -->
      <!--                   <li><a href="javascript:void(0)" load-html="#">限制文件类型</a></li> -->
      <!--                   <li><a href="javascript:void(0)" load-html="#">批量上传</a></li> -->
      <!--                   <li><a href="javascript:void(0)" load-html="#">自定义上传按钮图片</a></li> -->
      <!--                   <li><a href="javascript:void(0)" load-html="#">上传回调函数</a></li> -->
      <!--                 </ul>  -->

      <!-- 	      	</li> -->
      <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>富文本编辑器 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="rte_default" load-html="<%=basePath%>pages/richeditor/default.html">默认功能</a></li>
          <!--                   <li><a href="javascript:void(0)" load-html="#">全功能版</a></li> -->
          <!--                   <li><a href="javascript:void(0)" load-html="#">定制版</a></li> -->
        </ul>

      </li>

      <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>输入提示组件 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="autocomplete_default" load-html="<%=basePath%>pages/autocomplete/basic.html">默认功能</a></li>
        </ul>
      </li>

      <!-- <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>颜色选择器 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="colorpicker_default" load-html="pages/colorpicker/test.html">默认功能</a></li>
        </ul>
      </li> -->

      <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>滑动条 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="slider_default" load-html="<%=basePath%>pages/slider/test.html">默认功能</a></li>
        </ul>
      </li>

      <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>进度条 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="progressbar_default" load-html="<%=basePath%>pages/progressbar/test.html">默认功能</a></li>
        </ul>
      </li>

      <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>页签TAB <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="tab_default" load-html="<%=basePath%>pages/tab/test.html">默认功能</a></li>
        </ul>
      </li>

      <li class="has_sub"><a href="#"><i class="icon-list-alt"></i>工具栏 <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
        <ul>
          <li><a href="javascript:void(0)" tag="toolbar_default" load-html="<%=basePath%>pages/toolbar/test.html">默认功能</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="mainbar">
    <div class="matter"><div id="container">
      <div class="widget">
        <div class="widget-head">
          <ul id="myTab" class="nav nav-tabs pull-left">
            <!-- 这里是Tab标题区 -->
          </ul>
          <div class="widget-icons pull-right">
            <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
            <a href="#" class="wclose"><i class="icon-remove"></i></a>
          </div>
          <div class="clearfix"></div>
        </div>
        <div id="myTabContent" class="tab-content widget-content">
          <!-- 这里是Tab内容区 -->
        </div>
      </div>
    </div></div>

  </div>
</div>
<footer>
</footer>
<script src="<%=basePath%>js/jquery.js"></script>
<!--   <script src="./js/jquery_ui/jquery-ui.js" type="text/javascript"></script> -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<%=basePath%>js/custom.js"></script> <!-- Custom codes -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- 	<script src="js/jquery_005.js"></script> jQuery -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<!--   <script src="./js/koala_tree.js" type="text/javascript"></script> -->
<!--   <script src="./js/koala_combobox.js" type="text/javascript"></script> -->
<!--   <script src="./js/koala_datetimepicker.js" type="text/javascript" ></script> -->
<!--   <script src="./js/koala_layout.js" type="text/javascript" ></script> -->
<!--   <script src="./js/koala_richeditor.js" type="text/javascript"></script> -->
<!--   <script src="./js/koala_grid.js" type="text/javascript"></script> -->
<!--   <script src="./js/koala_wizard.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_ColorPicker.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_Tab.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_AutoComplete.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_Slider.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_ProgressBar.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_Button.js" type="text/javascript"></script> -->
<!--   <script src="./js/Koala_ToolBar.js" type="text/javascript"></script> -->
<!--   <script src="./js/data.js" type="text/javascript"></script>   -->
<script type="text/javascript">
  //定义一些事件
  $(function(){
    $("a[load-html]").click(function(){
      try {
        var title = $(this).html();
        var tag = $(this).attr("tag");
        //如果检测到相同的tag，则return
        if($("#myTab > li > a[href=#" + tag + "]").length){
          return false;
        }
        //add tab
        $("#myTab").children("li").removeClass("active");
        var $iClose = $('<i class="icon-remove tab-close"></i>');
        var $aHref = $('<a href="#' + tag + '" data-toggle="tab">' + title + '</a>');
        var $tab = $('<li class="active"></li>');

        $aHref.append($iClose);
        $tab.append($aHref);
        $("#myTab").append($tab);

        //添加一个TabContent
        var $myTabContent = $("#myTabContent");
        $myTabContent.children("div .tab-pane").removeClass("in").removeClass("active");
        //添加Tab对应的html内容区
        /* var $content = $('<div class="tab-pane fade in active" id="'+ tag + '"></div>');
         $content.load($(this).attr("load-html")); */
        var $content = $('<iframe class="tab-pane fade in active" id="'+ tag + '"></iframe>');
        $content.attr("src",$(this).attr("load-html"));
        $myTabContent.append($content);
        //添加事件
        $("#myTab > li > a > i").click(function(){
          closeTabAndContent($(this));
        });
      } catch (e) {
        alert(e.message);
      }

    })


  });

  //点击了X之后，关闭本身的tab和清理对应内容区
  function closeTabAndContent($obj){
    var $p = $obj.parent();
    //获取li
    var $pp = $p.parent();
    var $next = $pp.next();
    //如果是最后一个子的，则第一个为激活
    if(!$pp.siblings("li").length){
      return false;
    }
    if(!$next.length){
      $next = $pp.parent().find(":first-child");
    }
    var tabContentId = $p.attr("href");

    if($next.length){
      $(tabContentId).remove();
      $pp.remove();
      //$next.children("a").trigger("click");
      $("#myTab").children("li").removeClass("active");
      $next.addClass("active");
      var id = $next.children("a").attr("href");
      $(id).addClass("active").addClass("in");
    }
  }
</script>
</body>
</html>



